From bcbec384da5c0974680b665b2c503c83d6454677 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Wed, 15 Oct 2014 19:49:13 +0200 Subject: [PATCH] Adwaita: fix colorchooser styling after latest gtk changes ...commenting stuff pretty accuratelly in the process, since the widget is quite unobvious to figure out. --- gtk/resources/theme/Adwaita/_common.scss | 15 ++++++++++++--- .../theme/Adwaita/gtk-contained-dark.css | 15 ++++++++++++--- gtk/resources/theme/Adwaita/gtk-contained.css | 15 ++++++++++++--- 3 files changed, 36 insertions(+), 9 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index 978e117c7e..b7963a5b40 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -2790,6 +2790,10 @@ GtkInfoBar { *****************/ GtkColorSwatch { + // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one + // is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style + // is applied to the overlay box. + box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge(); // border rounding @@ -2801,17 +2805,19 @@ GtkColorSwatch { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - &.left, &:first-child { + &.left, &:first-child, &:first-child .overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - &.right, &:last-child { + &.right, &:last-child, &:last-child .overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - &:only-child { + &:only-child, &:only-child .overlay { border-radius: 5px; } + // nth-child works just on the custom colors row + // hover effect &:hover { @@ -2855,9 +2861,12 @@ GtkColorSwatch { // make the add color button looks like, well, a button &#add-color-button { + border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi + border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set @include button(normal); &:hover { @include button(hover); } &:backdrop { @include button(backdrop); } + .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat } } diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index b2fbfc8292..07e44d7b7b 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -4186,13 +4186,13 @@ GtkColorSwatch { GtkColorSwatch.bottom { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch.left, GtkColorSwatch:first-child { + GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - GtkColorSwatch.right, GtkColorSwatch:last-child { + GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch:only-child { + GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay { border-radius: 5px; } GtkColorSwatch:hover { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); @@ -4222,6 +4222,8 @@ GtkColorSwatch { GtkColorSwatch.overlay:hover { border-color: black; } GtkColorSwatch#add-color-button { + border-style: solid; + border-width: 1px; color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; @@ -4244,6 +4246,13 @@ GtkColorSwatch { text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); } + GtkColorSwatch#add-color-button .overlay { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); + text-shadow: none; + icon-shadow: none; } /******** * Misc * diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index a9ef6ce946..eed31a9daa 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -4347,13 +4347,13 @@ GtkColorSwatch { GtkColorSwatch.bottom { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch.left, GtkColorSwatch:first-child { + GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - GtkColorSwatch.right, GtkColorSwatch:last-child { + GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch:only-child { + GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay { border-radius: 5px; } GtkColorSwatch:hover { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); @@ -4383,6 +4383,8 @@ GtkColorSwatch { GtkColorSwatch.overlay:hover { border-color: rgba(0, 0, 0, 0.5); } GtkColorSwatch#add-color-button { + border-style: solid; + border-width: 1px; color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #a1a1a1; @@ -4405,6 +4407,13 @@ GtkColorSwatch { text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + GtkColorSwatch#add-color-button .overlay { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + icon-shadow: none; } /******** * Misc * -- 2.30.2